<?php require VIEWPATH . ADMIN_DIR . DIRECTORY_SEPARATOR . 'header.php' ?>
<style>
	#bar-echarts {
		width: 80vw;
		height: 48vh;
	}
	.outer-work {
		height: 5.2vh;
		float: left;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-right: 1vw;
	}
	.work-div {
		float: left;
		height: 3.5vh;
		/* width: 180px; */
		margin-top: 5px;
		background-color: #448FB9;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.work-calendar {
		padding: 0px 20px 0px 10px;
		text-align: center;
		z-index: 999;
	}
	.rec {
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 5px solid #fff;
		position: absolute;
		right: 5px;
	}
	#broken-echarts {
		width: 80vw;
		height: 40vh;
	}
</style>
<div class="col-xs-12 main">
	<div class="box box-homework">
		<div class="header-box">
			<div class="work-div">
				<div id="work-calendar" class="work-calendar"></div>
				<div class="rec"></div>
			</div>
		</div>
		<div id="bar-echarts" class="bar-echarts"></div>
		<div id="broken-echarts" class="broken-echarts"></div>
	</div>
</div>
<?php require VIEWPATH . ADMIN_DIR . DIRECTORY_SEPARATOR . 'footer.php' ?>
<script src="<?= $staticAdminUrl ?>assets/laydate/laydate.js"></script>
<script>
	$(function() {
		// 基于准备好的dom，初始化echarts实例
		var barChart = echarts.init(document.getElementById('bar-echarts'));
		var brokenChart = echarts.init(document.getElementById('broken-echarts'));
		// 指定作业统计柱形图的配置项和数据
		var barOption = {
			tooltip: {
				trigger: 'axis',
				axisPointer: { // 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					// type: 'shadow'
				}
			},
			color: ['#87B880', '#FFB751', '#D25B47'],
			legend: {
				data: ['已提交人数', '未提交人数', '预警人员'],
				// orient: 'vertical',
				// align: 'left',
				align: 'right'
				// left: '85%',
				// top: '6%'
			},
			grid: {
				// right: '18%'
			},
			yAxis: {
				type: 'value'
			},
			xAxis: {
				type: 'category',
				// data: [
				// 	'2010-01-01',
				// 	'2010-01-02',
				// 	'2010-01-03',
				// 	'2010-01-04',
				// 	'2010-01-05',
				// 	'2010-01-06',
				// 	'2010-01-07',
				// 	'2010-01-08',
				// 	'2010-01-09',
				// 	'2010-01-10',
				// 	'2010-01-11',
				// 	'2010-01-12',
				// 	'2010-01-13',
				// 	'2010-01-14',
				// ],
				data: JSON.parse('<?= $dateJson ?>'),
			},
			series: [
				{
					name: '已提交人数',
					type: 'bar',
					stack: '总量',
					label: {
						normal: {
							show: true,
							position: 'inside',
							formatter: function (params) {
								if (params.value > 0) {
									return params.value;
								} else {
									return '';
								}
							}
						}
					},
					data: JSON.parse('<?= $committedJson ?>'),
				},
				{
					name: '未提交人数',
					type: 'bar',
					stack: '总量',
					label: {
						normal: {
							show: true,
							position: 'inside',
							formatter: function (params) {
								if (params.value > 0) {
									return params.value;
								} else {
									return '';
								}
							}
						}
					},
					data: JSON.parse('<?= $unCommittedJson ?>')
				},
				// {
				// 	name: '预警人员',
				// 	type: 'bar',
				// 	stack: '总量',
				// 	label: {
				// 		normal: {
				// 			show: true,
				// 			position: 'inside',
				// 			formatter: function (params) {
				// 				if (params.value > 0) {
				// 					return params.value;
				// 				} else {
				// 					return '';
				// 				}
				// 			}
				// 		}
				// 	},
				// 	data: JSON.parse('<?= $warnJson ?>')
				// }
			]
		};
		// 使用刚指定的配置项和数据显示图表。
		if (barOption && typeof barOption === "object") {
			barChart.setOption(barOption, true);
			// barChart.setOption(barOption, true);
		}

		//执行一个laydate实例
		var chooseDate = getNowDate();
		var today = getNowDate();
		//默认设置作业时间区间开始为前14天
		var dayBefore = getBeforeFourteenDate();
		var rangeDate = dayBefore + ' - ' + today;
		// 判断是否有传日期参数
		<?php if(isset($begindate) && isset($enddate)): ?>
			rangeDate = "<?= $begindate . ' - ' . $enddate ?>";
		<?php endif ?>
		//作业统计的时间选择器
		laydate.render({
			elem: '#work-calendar', //指定元素
			value: rangeDate,
			range: true,
			max: today,
			btns: ['confirm'],
			done: function(value) {
				var arr = value.split(' - ');
				var begindate = arr[0];
				var enddate = arr[1];
				var dayCount = getDaysBetween(begindate, enddate);
				if(dayCount > 30) {
					layer.msg('范围不能大于30天', {icon: 2});
					return;
				}
				var url = "<?=admin_url('school/health_statistics')?>" + '?begindate=' + begindate + '&enddate=' + enddate;
				window.location.href = url;
			}
		});

		// 折线图
		var brokenOption = {
			title: {
				text: '预警人员折线图',
				textStyle: {
	                fontSize: 13,
	            }
			},
			xAxis: {
				type: 'category',
				data: JSON.parse('<?= $dateJson ?>')
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: JSON.parse('<?= $warnJson ?>'),
				type: 'line',
				// 折线图显示数值
				itemStyle : { normal: {label : {show: true}}}
			}]
		};
		// 使用刚指定的配置项和数据显示图表。
		if (brokenOption && typeof brokenOption === "object") {
			brokenChart.setOption(brokenOption, true);
		}
	});
    //获取当天日期
    function getNowDate() {
        var date = new Date();
        $res = formatDate(date);
        return $res;
    }

    function getBeforeFourteenDate() {
        var date = new Date(); //获取今天日期
        date.setDate(date.getDate() - 13);
        $res = formatDate(date);
        return $res;
    }

    function formatDate(date) {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var dateFormat = year + "-" + month + "-" + day;
        return dateFormat;
	}
	function  getDaysBetween(dateString1,dateString2){
		var  startDate = Date.parse(dateString1);
		var  endDate = Date.parse(dateString2);
		var days = (endDate - startDate)/(1*24*60*60*1000) + 1;
		// alert(days);
		return  days;
	}
</script>
